<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-table.min.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-table-zh-CN.min.js"></script>
    <script src="js/jquery.form.js"></script>
    <style>
        #title {
            text-align: center;
        }
    </style>


</head>

<body>
<div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1">
    <img src="http://47.106.73.53/zhihu/ResourcesImage/100sh.jpg" height="100%" width="100%"/>
</div>
<div class="col-md-12" style="padding-top: 150px">
    <div class="col-md-4"></div>
    <div id="title" class="col-md-4"><span style="font-size: 50px;color: #2b669a ">登录信息</span></div>
    <div class="col-md-4"></div>
</div>
<div class="col-md-12">
    <div class="col-md-4"></div>
    <div class="col-md-4">
        <div style="padding: 100px 100px 10px;">
            <form class="bs-example bs-example-form" role="form" action="/user/login" method="post">
                <div class="input-group">
                    <span class="input-group-addon" id="sizing-addon1">用户账号</span>
                    <input type="text" class="form-control" name="username" placeholder="请输入账号" id="username">
                </div>
                <br>
                <br>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" id="sizing-addon2">密&emsp;&emsp;码</span>
                    <input type="password" class="form-control" name="password" placeholder="请输入密码" id="password">
                </div>
                <br>
                <div style="text-align: right;text-decoration-line: none"><a href="retrieve_password.html">忘记密码</a>
                </div>
                <br>
                <div>
                    <input id="login_btn" class="btn btn-default" type="button"
                           style="width: 100%;height: 40px;background-color: #a94442;color: white" value="登录">
                </div>
                <div>
                    <a href="register.html"><input class="btn btn-default" type="button"
                                                   style="width: 100%;height: 40px;background-color: #a94442;color: white"
                                                   value="注册"></a>
                </div>
            </form>
        </div>
    </div>
    <div class="col-md-4"></div>
</div>
<div class="col-md-12">

    <div class="col-md-4">
        <br>
    </div>
    <div class="col-md-4">

    </div>
    <div class="col-md-4">

    </div>
</div>
<div class="col-md-12">
    <div class="col-md-4">

    </div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>


</body>
<script>
    $(function () {
        $("#login_btn").click(function () {
            var username = $("#username").val();
            var password = $("#password").val();
            $.ajax({
                url: "/user/login",
                type: "post",
                data: {
                    "username": username,
                    "password": password
                },
                dataType: "json",
                success: function (rs) {
                    if (rs.msg == "success") {
                        window.location = "/pages/question_first.html"
                    } else {
                        var msg = rs.message;
                        $('#sizing-addon2').next().html(msg);
                        $('#sizing-addon2').next().css("color", "red");
                        $('#sizing-addon1').next().html(msg);
                        $('#sizing-addon1').next().css("color", "red");
                    }
                }
            })
        })
    })
</script>
</html>